<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">联系方式</div>
    </template>

    <template #default>
      <div class="contact">
        <section class="contact-item">
          <span class="title">官网</span>
          <div class="contact-information">
            <el-link
              :underline="false"
              href="http://open.xuexiluxian.cn"
              target="_blank"
            >
              http://open.xuexiluxian.cn
            </el-link>
          </div>
        </section>
        <section class="contact-item">
          <span class="title">QQ群</span>
          <div class="contact-information">
            <el-link
              :underline="false"
              target="_blank"
              href="https://qm.qq.com/cgi-bin/qm/qr?k=5qn-R4GtfmjsOkbduG5VaAr2TQu3NGLa&jump_from=webapi"
            >530344089</el-link
            >
          </div>
        </section>
        <section class="contact-item">
          <span class="title">微信</span>
          <div class="contact-information">
            <span>iteachyou2020, </span>
            <span>zqx13949660512, </span>
            <span>XiAoWang-1016</span>
          </div>
        </section>
        <section class="contact-item">
          <span class="title">QQ</span>
          <div class="contact-information">
            <span>153095904,</span>
            <span>2591356063</span>
          </div>
        </section>
      </div>
    </template>
  </el-card>
</template>

<script>
	export default {
		title: "联系方式",
		icon: "el-icon-monitor",
		description: "联系方式",
		data() {
			return {
				ver: 'loading...'
			}
		},
		mounted() {
			this.getVer()
		},
		methods: {
			async getVer(){
				const version = await this.$API.system.version.get()
				this.ver = version.data
			},
			golog(){
				window.open("https://gitee.com/opendeer/xiaoluxian_vue")
			},
			godemo(){
				window.open("http://demo.open.xuexiluxian.cn")
			}
		}
	}
</script>
<style lang="less" scoped>
.contact {
  .contact-item {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--el-border-color);
    line-height: 35px;

    .svg {
      width: 16px;
    }

    .title {
      width: 80px;
    }

    .contact-information {
      flex: 1;
    }
  }
}
</style>
